import React, { useEffect , memo, useState } from 'react'
import { useHistory} from 'react-router-dom'
import Scroll from '../../baseUI/scroll'
import './Main.css'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'

import RotationChart from 
    '../../components/main/rotationChart/RotationChart'
import SearchInput from '../../components/SearchInput/SearchInput'
import TopBar from '../../components/main/topbar/TopBar.jsx'
import Swiper from 'swiper';
import Album from '../../components/main/album/Album.jsx'
import SingerRank from '../../components/main/singerRank/SingerRank.jsx'
import TopSinger from '../../components/main/topsinger/TopSinger.jsx'
import loading from '../../assets/images/loading.gif'

import "swiper/css/swiper.min.css";

let UrlA, UrlB;
let AlbumIdUrl ;
let url="";
// let isLoading=true;

const Main = (props) => {
    // 状态
    // console.log(props,'5555')

    const history = useHistory()
    
    
    const { banners=[] ,personalized=[],singerMessage=[],changeSingerMessage=[]} = props
    // action
    const { getMainDataDispatch } = props
    // const [display ,setDisplay] = useState(false)
    // console.log(props,"props");
    let [index,setIndex] = useState(0);

    
    // const [showPopup,setShowPopup] = useState(false)
    useEffect(()=>{
        let swiper =  new Swiper('.swiper-container-menu', {
            slidesPerView:1,
            threshold:100,
            longSwipesRatio : 0.5,
            touchAngle : 10,
            // noSwiping : true,
            // passiveListeners : false,
            onlyExternal : true,
            // simulateTouch : false,

            scrollbar: {
                el: '.swiper-scrollbar-menu',
                
            },
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                bulletClass:'default',
                bulletActiveClass:'select',
                clickable: true
            },
            on:{
                slideChange:function(){
                    setIndex(swiper.activeIndex);
                    // console.log(this.activeIndex,'changed');
                    // console.log(index,'slide changed');
                }
            }
           
            
        })
       
        if(index!=0){
            swiper.slideTo(index);
        }
        else if(index=0){
            swiper.slideTo(0);
        }
            
        

    },[index])
    
    const [select,setSelect] = useState(0);
    const [select2,setSelect2] = useState(0);
    UrlA = IndexTurnToAreaCode(select)
    UrlB = IndexTurnToTypeCode(select2)
    // console.log(IndexTurnToAreaCode(select),IndexTurnToTypeCode(select2))
    function IndexTurnToAreaCode (select){
        switch (select) {
            case select=0:
                return -1;
                
            case select=1:
                return 7;
            case select =2:
                // console.log(action.data,"#####");
                return 0
            case select=3:
                // console.log(action.data,"#####");
                return 96;
            case select =4:
                return 8;
            case select=5:
                return 16;
            default:
                return -1;
        }
    }
    function IndexTurnToTypeCode (select){
        switch (select) {
            case select=0:
                return -1;
                
            case select=1:
                return 1;
            case select =2:
                // console.log(action.data,"#####");
                return 2;
            case select=3:
                // console.log(action.data,"#####");
                return 3;
            
            default:
                return -1;
        }
    }
    useEffect(() => {
        if (!banners.length) {
            getMainDataDispatch()
        }
    }, [])
    
    let [AlbumId,setAlbumId] = useState(6970160184);
    AlbumIdUrl = AlbumId;
    // console.log(AlbumId);
    // useEffect(() => {
    //     if (changeSingerMessage.length>=10) {
            
    //         isLoading = true;
    //     }
    //     else  {
    //         isLoading = false;
    //     }
    // }, [changeSingerMessage])
// console.log(isLoading);
    useEffect(() => {
        getMainDataDispatch()
        // console.log('---------------------||||||||||||||||||')
    }, [select, select2])
    useEffect(() => {
        getMainDataDispatch()
        // console.log('---------------------||||||||||||||||||')
    }, [AlbumId])
  
   
    return (
        <div className="main_page">
            
            <div className="top">
            
            <TopBar index={index} setIndex={setIndex}/>
            
            <SearchInput 
                
                
            />
            
            </div>
            <div className="main-padding">
            <Scroll
                direction={"vertical"}
                refresh={true}
                onScroll={
                    (e) => {
                        // console.log(e.y)
                        if (e.y < -1142) {
                            
                        } else {
                            
                        }
                        
                    }
                }
                // pullUp={}
                // pullDown={}
                >
            

            <div className="menu-bar" style={{width: '100vw' }} >
                <div className="menu-bar1" style={{width: '100vw' }} >
                    
                    <div className="swiper-container-menu "  style={{width: '100vw' }} >
                        {/* swiper  */}
                        <div className="swiper-wrapper" style={{width: '100vw'}} >

                            <div className="swiper-slide " style={{width: '100vw' }}>
                                <div>
                                    
                                        {/* <Classify classify={classify}/> */}
                                        <RotationChart banners={banners}/>
                                        {/* <MenuBarItem menuBarData ={menuBarData}/> */}
                                        
                                        <Album  personalized={personalized} name={"你的歌单宝藏库"} min={0} max={2} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                        <Album  personalized={personalized} name={"为你精选的AI歌单"} min={3} max={5} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                        <Album  personalized={personalized} name={"新专辑推荐"} min={6} max={8} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                        <Album  personalized={personalized} name={"有趣的灵魂都在看"} min={9} max={11} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                        <Album  personalized={personalized} name={"你喜爱的歌手这里都有"} min={12} max={14} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                        <Album  personalized={personalized} name={"今日为你推荐的最佳歌单"} min={15} max={17} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                        <Album  personalized={personalized} name={"最懂你的中国风"} min={18} max={20} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                        <Album  personalized={personalized} name={"播客 听见另外一个声音"} min={21} max={23} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                        <Album  personalized={personalized} name={"私荐给你的宝藏歌手"} min={24} max={26} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                        <Album  personalized={personalized} name={"为你推荐更多"} min={27} max={30} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                       
                                    
                                </div>
                            </div>
                            <div className="swiper-slide"
                            style={{width: '100%' }}>
                                <div>
                                <TopSinger singerMessage={singerMessage}/>
                                <SingerRank singerMessage={singerMessage} select={select} select2={select2} setSelect={setSelect} setSelect2={setSelect2} changeSingerMessage={changeSingerMessage}/>
                     
                                </div>
                            </div>
                            <div className="swiper-slide"
                            style={{width: '100%'}}>
                                <div>
                                作者正在开发中..............
                                </div>
                            </div>
                            <div className="swiper-slide"
                            style={{width: '100%'}}>
                                <div>
                                <Album  personalized={personalized} name={"你的歌单宝藏库"} min={0} max={2} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                <Album  personalized={personalized} name={"为你精选的AI歌单"} min={3} max={5} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                <Album  personalized={personalized} name={"新专辑推荐"} min={6} max={8} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                <Album  personalized={personalized} name={"有趣的灵魂都在看"} min={9} max={11} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                <Album  personalized={personalized} name={"你喜爱的歌手这里都有"} min={12} max={14} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                <Album  personalized={personalized} name={"今日为你推荐的最佳歌单"} min={15} max={17} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                <Album  personalized={personalized} name={"最懂你的中国风"} min={18} max={20} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                <Album  personalized={personalized} name={"播客 听见另外一个声音"} min={21} max={23} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                <Album  personalized={personalized} name={"私荐给你的宝藏歌手"} min={24} max={26} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                <Album  personalized={personalized} name={"为你推荐更多"} min={27} max={30} AlbumId={AlbumId} setAlbumId={setAlbumId}/>
                                </div>
                            </div>
                            
                        </div>
                        <div className="swiper-pagination" ></div>
                        
                        
                    </div>
                    
                </div>
            </div>
            
            </Scroll>
        
           </div>
            
                
            
            
        </div>
    )
}
const mapStateToPorps = (state) => {
    // console.log(state,'state')
    return {
        banners: state.main.banners,
        personalized:state.main.personalized,
        singerMessage:state.main.singerMessage,
        changeSingerMessage:state.main.changeSingerMessage,
        songSheetDetail:state.main.songSheetDetail
    }
}
const mapStateToDispatch = (dispatch) => {
    return {
        getMainDataDispatch() {
            // console.log(a, b, '///////////////////')
            // console.log(AlbumIdUrl)
            dispatch(actionTypes.getBanners())
            dispatch(actionTypes.getPersonalized())
            dispatch(actionTypes.getHotSingerListRequest(0))
            dispatch(actionTypes.getChangeSingerList(UrlA,UrlB) )
            dispatch(actionTypes.getSongSheetDetail(AlbumIdUrl))

            
            // dispatch(actionTypes.get(0))
        }
    }
}
//上拉加载更多
const handlePullUp = () =>{

}
//下拉刷新
const handlePullDown = () =>{

}

export default connect(mapStateToPorps, mapStateToDispatch)(memo(Main))